<template>
  <div class="app-container">
    <div style="background-color:#F2F5F8;">
      <div class="top">
        <!-- <i class="icon el-icon-arrow-left" @click="goBack()" /> -->
        <div class="title">{{ formName }}</div>
        <el-button style="margin-right: 12px;" type="primary" size="small"
                   @click="goBack()">返回</el-button>
      </div>
      <el-row class="flowDetail">
        <el-col :span="flowType == 'needtodo'?18:24" :xs="24">
          <!-- 顶部基本信息 -->
          <div v-if="flowType !== 'maintain'" class="leftBox">
            <div style="padding: 16px;">
              <div class="leftTop">
                <span>
                  <span class="title1">{{ info.processName?info.processName:'-' }}</span>
                  <span class="title2">流程编号：{{ info.instanceId?info.instanceId:'-' }}</span>
                  <span class="title2">{{ info.startUser?info.startUser:'-' }}</span>
                  <span class="title2">{{ info.startUserOrgName?info.startUserOrgName:'-' }}</span>
                </span>
                <span class="time">{{ info.startTime?info.startTime:'-' }}</span>
              </div>
              <el-divider />
              <!-- 表单信息 -->
              <div style="margin-top: 24px;">
                <flowForm ref="flowFormRef" :dealform="dealform" @getflowDeal="getflowDeal"
                          @getFormName="getFormName" />
              </div>
            </div>
          </div>
          <div v-if="flowType === 'maintain' ||flowType === 'applied' ||flowType === 'needtodo' ||flowType === 'doneTask'||flowType === 'cs'" class="leftBox">
            <el-tabs v-model="activeName" @tab-click="handleClick(activeName)">
              <el-tab-pane label="操作记录" name="1">
                <div class="operator" style="padding: 16px;">
                  <p class="switchbtn" @click="switchFlag=!switchFlag">
                    <span v-if="!switchFlag">切换至表格视图</span>
                    <span v-if="switchFlag">切换至流程视图</span>
                    <svg-icon icon-class="switch2" class="switch2" />
                    <svg-icon icon-class="switch" class="switch" />
                  </p>
                  <flowTimeline v-if="!switchFlag" :time-line-data="timeLineData" />
                  <flowDetailInformation v-if="switchFlag" :table-data="tableData" />
                </div>
              </el-tab-pane>
              <el-tab-pane label="流程图" name="2">
                <el-row>
                  <el-col :span="18" :xs="24" class="operator">
                    <flow :flow-data="flowData" @getCurrentNode="getCurrentNode" />
                  </el-col>
                  <el-col :span="6" :xs="24" class="operator"
                          style="border-left: 1px solid #DCDFE6;">
                    <div>
                      <div class="title5">节点详情</div>
                    </div>
                    <el-divider />
                    <nodeDetali v-if="activityId" :node-data="nodeData" />
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
        <el-col :span="flowType == 'needtodo'?6:0" :xs="24">
          <div v-if="flowType === 'needtodo'" class="rightBox">
            <div class="title4">流程审批</div>
            <el-divider />
            <div style="padding: 16px;">
              <flowDeal ref="flowDeal" :flow-deal-detail="flowDealDetail" @getdealForm="getdealForm" />
              <div class="formbtnsbox">
                <el-button v-preventReClick="3000" type="primary" style="width: 100%;"
                           @click="dealSubmitForm">提交</el-button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { formApplyDetailImg, taskListDetail, getActivityDetail, taskViewList, getTitleInfo } from '@/framework/api/affairManage/flowDetail/Config'
import flowForm from './components/flowForm.vue'
import flowDetailInformation from './components/flowDetailInformation'
import flowDeal from './components/flowDeal'
import flow from './components/flowImg/flow.vue'
import flowTimeline from './components/flowTimeline'
import nodeDetali from './components/nodeDetali.vue'

export default {
  components: {
    flowForm,
    flow,
    flowDetailInformation,
    flowDeal,
    flowTimeline,
    nodeDetali
  },
  data() {
    return {
      // 流程基本信息
      info: {
        processName: '',
        instanceId: '',
        startUser: '',
        startUserOrgName: '',
        startTime: ''
      },
      formName: '', // 表单名称
      switchFlag: true, // 切换操作记录和流程图的标志
      tableData: [], // 操作记录-表格数据
      timeLineData: [], // 操作记录-时间线图数据
      flowType: '', // 表单类型
      flowData: {}, // 流程图数据
      flowDealDetail: {}, // 流程审批-表单数据
      dealform: {}, // 流程审批-提交数据
      activeName: '1', // 切换操作记录和流程图的标志
      nodeData: [], // 节点详情数据
      activityId: '', // 点击节点ID
      taskId: ''// 流程ID
    }
  },
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
    }
  },
  created() {
  },
  mounted() {
    this.getInfo()
    if (this.$route.query.id) {
      this.gettaskListDetail(this.$route.query.id) // 获取流程操作记录
      this.getTimeLineData(this.$route.query.id)// 获取流程时间线图
    }
    if (this.$route.query.taskId) {
      this.taskId = this.$route.query.taskId
    }
    this.flowType = this.$route.query.type
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    },
    // 流程详情页-流程表基本信息
    getInfo() {
      getTitleInfo({ instanceId: this.$route.query.id }).then((res) => {
        this.info = res.data
      })
    },
    // 流程详情页-表单名称展示
    getFormName(formName) {
      this.formName = formName
    },
    // 流程审批-获取左侧表单信息
    getflowDeal(flowDealDetail) {
      this.flowDealDetail = flowDealDetail
      this.$refs.flowDeal.getflowableToDoTask(flowDealDetail, this.$route.query.taskId)
    },
    // 流程审批-获取处理表单的信息
    getdealForm(dealform) {
      this.dealform = dealform
      if (this.dealform.formType === 1) {
        this.$refs.flowFormRef.$refs.parserForm.submitForm()
      } else {
        this.$refs.flowFormRef.saveCustomeFromData()
      }
    },
    // 流程审批-点击提交
    dealSubmitForm() {
      this.$refs.flowDeal.dealSubmitForm(this.taskId)
    },
    // 获取流程图
    getformApplyDetailImg(id) {
      formApplyDetailImg({ instanceId: id }).then((res) => {
        this.flowData = res.data
      })
    },
    // 流程操作记录-表格数据
    gettaskListDetail(id) {
      taskListDetail({ instanceId: id }).then((res) => {
        this.tableData = res.data
      })
    },
    // 获取操作记录-流程时间线图
    getTimeLineData(id) {
      taskViewList({ instanceId: id }).then((res) => {
        this.timeLineData = res.data
      })
    },
    // 点击流程图节点，获取节点详情
    getCurrentNode(currentNode) {
      this.activityId = currentNode.element.id
      getActivityDetail({ activityId: this.activityId, instanceId: this.$route.query.id }).then((res) => {
        this.nodeData = res.data
      })
    },
    // 切换操作记录/流程图
    handleClick(activeName) {
      if (activeName === '2') {
        this.getformApplyDetailImg(this.$route.query.id)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.top{
  width: 100%;
  height: 60px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: inset -1px -1px 0px 0px #DCDFE6;
  padding-left: 20px;
  .icon{
    line-height: 20px;
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }
}
::v-deep.el-divider--horizontal {
  border-bottom: 1px solid #DCDFE6;
  margin: 0;
}
.flowDetail{
    margin:0 48px;
}
.leftBox:first-child{
  margin-bottom: 16px;
}
.leftBox{
    margin-right: 16px;
    background-color: #fff;
    .leftTop{
      padding: 8px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title1{
        height: 28px;
        font-size: 20px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #2A4ECC;
        line-height: 28px;
        padding-right: 12px;
      }
      .title2{
        height: 24px;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #131414;
        line-height: 24px;
        padding: 4px 12px 0;
        border-right: 1px solid #DCDFE6;
      }
      .title2:last-child{
        border: none;
      }
      .time{
        height: 24px;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #909399;
        line-height: 24px;
      }

    }
    .operator{
        height: 600px;
        overflow: scroll;
      }
}
::-webkit-scrollbar {
  float: right;
  width: 4px;
  height: 4px;
  background-color: white;
}
::v-deep .el-tabs__item {
  padding: 0;
  height: 48px;
  line-height: 48px;
  width: 96px;
  text-align: center;
}
.formbtnsbox{
  display: flex;
  justify-content: center;
}
.rightBox{
  background-color: #fff;
  min-height: calc(100vh);
  .title4{
    height: 24px;
    font-size: 16px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #131414;
    line-height: 24px;
    text-align: center;
    margin-bottom: 24px;
    padding-top: 12px;
  }
}
::v-deep .el-tabs__header {
    margin: 0 !important;
}
.switch2{
    margin-left: 4px;
    display: block;
  }
  .switch{
    margin-left: 4px;
    display: none;
  }
 .switchbtn{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 14px;
    font-weight: 400;
    line-height: 15px;
    cursor: pointer;
  }
.switchbtn:hover{
  color: #3461FF;
  .switch{
    display: block;
  }
  .switch2{
    display: none;
  }
}
.title5{
  height: 24px;
  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #131414;
  line-height: 24px;
  margin: 8px auto;
  text-align: center;
}
</style>
